<template>
    <div class="home-wrapper">
        <project-menu :detail="projectDetail" :pid="projectId"></project-menu>
        <div class="filters-wrapper" :v-loading="loading">
            <div class="title total_title">
                <span>{{title}} - 素材库<font class="total_title_back" @click="$router.go(-1)">/ 返回上一级</font></span>
            </div>
            <el-row type="flex">
                <el-radio-group v-model="librarytype" @change="loadLibrary({})" style="margin-bottom: 20px;">
                    <el-radio-button label="all">全部素材</el-radio-button>
                    <el-radio-button label="video_h">横版视频</el-radio-button>
                    <el-radio-button label="video_v">竖版视频</el-radio-button>
                    <el-radio-button label="image_h">横版大图</el-radio-button>
                    <el-radio-button label="image_v">竖版大图</el-radio-button>
                </el-radio-group>
            </el-row>
            <el-row type="flex" justify="start" align="middle">
                <div class="form-wrapper" style="width: 300px;margin: 0 10px 0;">
                    <el-input placeholder="请输入素材文件名称" size="small" v-model="jd_search" class="input-with-select">
                        <el-button @click="loadLibrary({})" slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
                <el-button v-if="projectDetail.status == 1" size="small" type="primary" @click="addmaterial = true">上传素材</el-button>
                <el-button size="small" @click="doSelect">反选</el-button>
                <el-button v-if="projectDetail.status == 1" size="small" type="danger" @click="delSelectClick()">删除</el-button>
            </el-row>
            <div class="library_wrap">
                <div class="library_list" v-for="(library, index) in librarys" :key="index">
                    <div class="library_card">
                        <video class="library_list_video" :src="library.video" controls v-if="library.video !== undefined">
                            
                        </video>
                        <el-image v-if="library.img !== undefined" fit="contain" class="library_list_img"
                            :src="library.img"></el-image>
                    </div>
                    <div class="library_card_name">
                        <el-checkbox class="check_wrap" v-model="library.checked" :key="library.id">{{library.title}}</el-checkbox>
                    </div>
                    <div class="uploader-wrap" v-if="library.video !== undefined">
                        <span class="uploader-title">视频封面</span>
                        <el-upload class="avatar-uploader" list-type="picture-card" :limit="1"
                            :action="uploadUrl" :headers="uploadHeader"
                            :data="{project_id: projectId, video_id: library.id_media, type: type, file_type: 'video_cover'}"
                            :show-file-list="false"
                            :on-success="uploadSuccess">
                            <img v-if="library.video_img" :src="library.video_img" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            <!-- <i slot="default" class="el-icon-plus"></i>
                            <div slot="file" slot-scope="{file}">
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                        <i class="el-icon-zoom-in"></i>
                                    </span>
                                    <span v-if="!disabled" class="el-upload-list__item-delete"
                                        @click="handleRemove(file)">
                                        <i class="el-icon-delete"></i>
                                    </span>
                                </span>
                            </div> -->
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </div>
                    <el-dropdown v-if="projectDetail.status == 1" class="library_card_state" @command="handleCommand($event, library)">
                        <span class="el-dropdown-link">
                            更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="push">推送</el-dropdown-item>
                            <el-dropdown-item command="delete">删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <el-row type="flex" justify="end" style="margin-top: 20px;">
                    <el-pagination background layout="prev, pager, next" :current-page.sync="curPage" :total="total" :page-size="pageSize"
                        @current-change="handleCurrentChange($event)">
                    </el-pagination>
                </el-row>
            </div>
            <!-- 分割线 -->
            <el-dialog title="上传素材" :visible.sync="addmaterial" width="50%" center :close-on-click-modal="false">
                <el-row type="flex" align="middle" justify="center">
                    <el-upload class="add_upload" drag :action="uploadUrl" :headers="uploadHeader"
                        :data="{project_id: projectId, type: type, file_type: ''}"
                        :on-success="uploadSuccess" multiple>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">
                            <p>横版视频：宽高比16:9，视频码率≥516kbps，大小≤1000M，分辨率≥1280x720</p>
                            <p>竖版视频：宽高比9:16，视频码率≥516kbps，大小≤1000M，分辨率≥720x1280</p>
                            <p>横版大图：宽高比16:9,1280*720≤尺寸≤2560*1440,支持JPG、PNG等图片格式</p>
                            <p>竖版大图：宽高比9:16,720*1280≤尺寸≤1440*2560,支持JPG、PNG等图片格式</p>
                            <br />
                        </div>
                    </el-upload>
                </el-row>
                <!-- <el-tabs v-model="uploadlibrary">
                    <el-tab-pane label="横版视频" name="1">
                        <el-row type="flex" align="middle" justify="center">
                            <el-upload class="add_upload" drag :action="uploadUrl" :headers="uploadHeader"
                                :data="{project_id: projectId, type: type, file_type: 'video_h'}"
                                :on-success="uploadSuccess" multiple>
                                <i class="el-icon-upload"></i>
                                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                <div class="el-upload__tip" slot="tip">
                                    <p>横版视频：宽高比16:9，视频码率≥516kbps，大小≤1000M，分辨率≥1280x720</p>
                                    <br />
                                </div>
                            </el-upload>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="竖版视频" name="2">
                        <el-row type="flex" align="middle" justify="center">
                            <el-upload class="add_upload" drag :action="uploadUrl" :headers="uploadHeader"
                                :data="{project_id: projectId, type: type, file_type: 'video_v'}"
                                :on-success="uploadSuccess" multiple>
                                <i class="el-icon-upload"></i>
                                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                <div class="el-upload__tip" slot="tip">
                                    <p>竖版视频：宽高比9:16，视频码率≥516kbps，大小≤1000M，分辨率≥720x1280</p>
                                    <br />
                                </div>
                            </el-upload>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="横版大图" name="3">
                        <el-row type="flex" align="middle" justify="center">
                            <el-upload class="add_upload" drag :action="uploadUrl" :headers="uploadHeader"
                                :data="{project_id: projectId, type: type, file_type: 'image_h'}"
                                :on-success="uploadSuccess" multiple>
                                <i class="el-icon-upload"></i>
                                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                <div class="el-upload__tip" slot="tip">
                                    <p>横版大图：宽高比16:9,1280*720≤尺寸≤2560*1440,支持JPG、PNG等图片格式</p>
                                    <br />
                                </div>
                            </el-upload>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="竖版大图" name="4">
                        <el-row type="flex" align="middle" justify="center">
                            <el-upload class="add_upload" drag :action="uploadUrl" :headers="uploadHeader"
                                :data="{project_id: projectId, type: type, file_type: 'image_v'}"
                                :on-success="uploadSuccess" multiple>
                                <i class="el-icon-upload"></i>
                                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                <div class="el-upload__tip" slot="tip">
                                    <p>竖版大图：宽高比9:16,720*1280≤尺寸≤1440*2560,支持JPG、PNG等图片格式</p>
                                    <br />
                                </div>
                            </el-upload>
                        </el-row>
                    </el-tab-pane>
                </el-tabs> -->
                <el-row type="flex" align="middle" justify="center">
                    <el-button size="small" @click="addmaterial = false">取 消</el-button>
                    <el-button size="small" type="primary" @click="okClick">确定</el-button>
                </el-row>
            </el-dialog>
        </div>
    </div>
</template>
<script>
    import {
        pageParams
    } from '@/settings'
    export default {
        data() {
            return {
                loading: false,
                title: '',
                type: '',
                projectId: 0,
                projectDetail: {},
                pageSize: pageParams.pageSize,
                curPage: 1,
                total: 0,
                librarytype: 'all',
                jd_search: '',
                librarychek: '',
                librarys: [],
                checks: [],
                addmaterial: false,
                uploadlibrary: '1',
                uploadUrl: '/api/upload',
                fileList: [],
                uploadHeader: {
                    Authorization: ''
                },
                dialogImageUrl: '',
                dialogVisible: false,
                disabled: false
            }
        },
        created() {
            this.projectId = this.$router.currentRoute.params.id
            this.type = this.$router.currentRoute.params.type
            this.uploadHeader.Authorization = this.$store.getters.token
            // console.log(this.uploadHeader)
            // this.newlabel.type = this.type
            if (this.type == 'project') {
                this.title = '项目素材库'
            } else {
                this.title = '个人素材库'
            }
            if (process.env.VUE_APP_MOCK == 'true') {
                this.uploadUrl = '/upload'
            }
        },
        mounted() {
            this.loadData()
        },
        methods: {
            loadData() {
                this.$axios.get('/project/detail', {
                        projectid: this.projectId
                    })
                    .then(e => {
                        this.projectDetail = e.data
                    })
                this.loadLibrary({})
            },
            loadLibrary(param) {
                param['type'] = this.type
                param['file_type'] = this.librarytype == 'all' ? '' : this.librarytype
                param['number'] = this.pageSize
                param['projectid'] = this.projectId
                param['keyword'] = this.jd_search
                if (!param['page']) {
                    param['page'] = 1
                }
                this.curPage = param['page']
                // console.log('loading', param)
                this.loading = true
                this.$axios.get('/library/list', param)
                    .then(e => {
                        this.loading = false
                        e.data.items.forEach((ele) => {
                            ele.checked = false
                        })
                        this.librarys = e.data.items
                        this.total = e.data.total
                        // console.table(this.librarys)
                    })
            },
            handleCurrentChange(val) {
                this.loadLibrary({
                    page: val
                })
            },
            doSelect() {
                console.log('1', this.librarys)
                this.librarys.forEach((ele) => {
                    ele.checked = !ele.checked
                })
                console.log(this.librarys)
            },
            uploadSuccess(res, file) {
                console.log(res, file)
                if (res.code == 1) {
                    if (res.data.video_id && res.data.file) {
                        var lib = this.librarys.find(ele => {
                            return ele.id_media == res.data.video_id
                        })
                        if (lib) {
                            lib.video_img = res.data.file
                        }
                        console.table(this.librarys)
                    }
                    let url = res.data.file
                    this.fileList.push(url)
                    this.$message.success(res.msg ? res.msg : '上传成功')
                } else {
                    this.$message.error(res.msg ? res.msg : '上传失败')
                }
            },
            handleCommand(command, item) {
                // console.log('click on item ' + command, item);
                if (command == 'push') {
                    this.pushClick(item)
                } else if (command == 'delete') {
                    this.delClick([item])
                }
            },
            pushClick(item) {
                console.log(item)
                this.$axios.post('/library/push', {
                        id: item.id,
                        type: this.type
                    })
                    .then(() => {
                        this.$message({
                            type: 'success',
                            message: '推送成功!'
                        })
                    })
            },
            okClick() {
                this.addmaterial = false
                // console.log('fileList', this.fileList)
                this.loadLibrary({})
            },
            delSelectClick() {
                let libs = this.librarys.filter((ele) => {
                    return ele.checked
                })
                if (libs.length <= 0) {
                    this.$message({
                        type: 'error',
                        message: '没有选中项!'
                    })
                    return
                }
                this.delClick(libs)
            },
            delClick(items) {
                let ids = []
                items.forEach((ele) => {
                    ids.push(ele.id)
                })
                this.$confirm('此操作将删除该项, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post('/library/delete', {
                            ids: JSON.stringify(ids),
                            type: this.type
                        })
                        .then((e) => {
                            this.$message({
                                type: 'success',
                                message: e.msg ? e.msg : '删除成功!'
                            })
                            this.loadLibrary({})
                        })
                }).catch(() => {})
            },
            handleRemove(file) {
                console.log(file);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            }
        }
    }
</script>
